<link href="/assets/addons/fastflow/plugins/card/card.css" rel="stylesheet" type="text/css"/>
<style>
    .row{
        margin-left: 0;
        margin-right: 0;
    }

    body{
        background: white;
    }
    legend {
        padding: 5px;
        font-size: 15px;
        font-weight: 600;
    }
    .btn-group{
        display: flex;
        position: relative;
        vertical-align: middle;
        line-height: 32px;
    }
    .btn-group .btn{
        margin-right: 6px;
    }
    .stamp-toolbar{
        background: #fdfdfd;
        padding: 0px 8px 8px 8px;
        border-bottom: 1px solid #efefef;
    }
    .stamp-toolbar .btn-group .btn-sm{
        padding: 7px 12px;
    }
    .empty-hint{
        width: 100%;
        height: 34px;
        text-align: center;
        position: absolute;
        text-align: center;
        top:calc(50vh - 17px);
        font-size: 16pt;
        font-family: '黑体';
        color: #c2c2c2;
    }

    .tree{
        height: calc(100vh - 86px)!important;
        border: 1px solid #e9e9e9;
        overflow: auto;
    }

    #group_tree{
        margin-top: 30px;
    }

    div ::-webkit-scrollbar {
        /*滚动条整体*/
        width: 8px;
        height: 8px;
        border-radius: 5px;
    }
    div ::-webkit-scrollbar-track {
        /*滚动条轨道*/
        background: #e3e3e3;
        border-radius: 2px;
    }
    div ::-webkit-scrollbar-thumb {
        /*滚动条里面的滑块*/
        background: #d1d1d1;
        border-radius: 2px;
    }
    div ::-webkit-scrollbar-thumb:hover {
        /*滚动条鼠标事件，鼠标放上去出现的事件*/
        background: #a8a8a8;
    }
    div ::-webkit-scrollbar-corner {
        /*滚动条边角*/
        background: #a8a8a8;
    }
    .contenedorCards .card {
        width: 176px!important;
    }
    .contenedorCards .card .wrapper .imgProd {
        background-position: center!important;
        height: 160px!important;
        padding: 8px;
    }
    .contenedorCards .card .wrapper .infoProd .actions .preciosGrupo {
        height: 40px!important;
    }
    .contenedorCards .card .wrapper .infoProd {
        height: 66px!important;
        padding: 0px 10px 0px 10px!important;
        margin-top: 4px!important;
    }
    .contenedorCards .card .wrapper .infoProd .actions .action {
        bottom: 0px!important;
        right: 4px!important;
    }
    .contenedorCards .card .wrapper .infoProd .actions .preciosGrupo .precio {
        font-size: 15px!important;
        padding-top: 8px!important;
    }
    .contenedorCards .card .wrapper .infoProd .extraInfo {
        margin-top: 4px!important;
        height: 20px!important;
    }
    li.active > a {
        background-color: #ccd9ff;
        color: black;
    }
    .ebill-list{
        height: calc(100vh - 186px)!important;
        overflow: auto;
        border: 1px solid #e9e9e9;
    }
    .tag-right{
        position: absolute;
        right: -1px;
        top: -1px;
    }
    .tag-left{
        position: absolute;
        left: -2px;
        top: -2px;
    }
    .tag-warning{
        position: relative;
        border-radius: 2px 2px 0px 2px;
        color: #fff;
        padding: 2px 6px;
        font-size: 10px;
        line-height: 16px;
        background: linear-gradient(to right bottom, rgba(255, 255, 255, 0.4), transparent) var(--bg, #e0a100);
        background-blend-mode: soft-light;
    }
    .tag-warning::before,.tag-success::before{
        content: '';
        position: absolute;
        width: 3px;
        height: 3px;
        right: 1px;
        bottom: -3px;
        background-color: inherit;
        filter: brightness(.7);
        clip-path: polygon(0 0, 0 100%, 100% 0);
    }
    .tag-success{
        position: relative;
        border-radius: 2px 2px 0px 2px;
        color: #fff;
        padding: 2px 6px;
        font-size: 10px;
        line-height: 16px;
        background: linear-gradient(to right bottom, rgba(255, 255, 255, 0.4), transparent) var(--bg, #499bc9c4);
        background-blend-mode: soft-light;
    }
</style>

<div class="nav-tabs-custom">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#stamp" data-toggle="tab" aria-expanded="true">已签章</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="stamp">
            <div class="row">
                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 tree">
                    <legend>选择单据</legend>
                    <ul class="sidebar-menu bill-list">
                        {volist name='billList' id='bill'}
                        <li class="bill-item {if $key==0}active{/if}" data-bill="{$bill.bill_table|htmlentities}" data-count="{$bill.count|htmlentities}">
                            <a href="javascript:;" addtabs="1" class="">
                                <span>{$bill.bill_name|htmlentities}</span>
                            </a>
                        </li>
                        {/volist}
                    </ul>
                </div>
                <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
                    <div class="stamp-toolbar" id="stamp-toolbar">
                        <div class="btn-group">
                            <a id="refresh" href="javascript:;" class="btn btn-sm btn-primary" title="刷新" style="border-radius: 3px;"><i class="fa fa-refresh"></i> 刷新</a>
                        </div>
                    </div>
                    <div class="ebill-list">
                        <div class="contenedorCards" id="contenedorCards">

                        </div>
                        <span class="empty-hint">无已签电子表单</span>
                    </div>
                    <nav class="text-right">
                        <ul class="pagination" id="pagination"></ul>
                    </nav>
                </div>
            </div>

            <script id="itemTpl" type="text/html">
                <% for(var i=0; i<list.length; i++){ %>
                <div class="card">
                    <div class="wrapper">
                        <div class="tag-right">
                            <% if(list[i]['status']==0){ %>
                            <tag class="tag-warning"><i class="fa fa-exclamation-circle"></i> 单据ID：<%=list[i].bill_id%></tag>
                            <% } %>
                            <% if(list[i]['status']==1){ %>
                            <tag class="tag-success"><i class="fa fa-check-circle"></i> 单据ID：<%=list[i].bill_id%></tag>
                            <% } %>
                        </div>
                        <div class="imgProd" data-id="<%=list[i].id%>">
                            <div style='height:100%;width:100%;background-image:url("<%=list[i].thumbnail%>");background-size:contain;background-repeat:no-repeat;background-position:center;'></div>
                        </div>
                        <div class="infoProd">
                            <p class="extraInfo">发起人：<%=list[i].admin.nickname%></p>
                            <div class="actions">
                                <div class="preciosGrupo">
                                    <p class="precio precioProd"><%=list[i].ebill_copy.title%></p>
                                </div>

                                <div class="action toolbar">
                                    <a href="javascript:;" class="btn btn-xs btn-info btn-stamp" data-id="<%=list[i].id%>"><i class="fa fa-eye"></i> 查看</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <% } %>
            </script>
        </div>
    </div>
</div>




